<template>
  <div class="top3">
    <div class="top1">
      <div>
        <el-row :gutter="0">
        <el-col :span="16"
          ><div id="top1" class="grid-content bg-purple">
             <img width="100%" src="./images/login/login-l.png" alt="" />
            </div
        ></el-col>
        <div id="top2">
            <el-col :span="8"><div align=center class="grid-content bg-purple">
            <div id="top2">
                <img src="./images/login/logo.png" alt="" /><br>
            </div>

            <el-input type="text" v-model="mobile" class="top8" placeholder="手机号">
                <el-button @click="smsCode" :disabled='fal' slot="append">{{smg}}</el-button>
                </el-input><br>
            <el-input type="text" v-model="sms_code" class="top8" placeholder="验证码"></el-input><br>

            <el-button @click="login" type="primary" class="top8">登录</el-button>

            </div></el-col>
        </div>
      </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    name: '',
    data() {
        return {
            mobile: '',
            sms_code: '',
            fal: false,
            smg: '获取验证码',
            time: 60
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
        // 获取验证码
        smsCode(){
            // 验证码手机号
            var reg = /^1[3-9]\d{9}$/
            if (!reg.test(this.mobile)){
                alert('手机号不合法')
                return false
            }
            // alert('pass')
            var t = setInterval(() =>{
                if (this.time == 0) {
                    this.smg = '发送验证码'
                    this.fal = false
                    this.time = 6
                    clearInterval(t)
                } else {
                    this.smg = this.time + '秒'
                    this.time--
                    this.fal = true
                }
            }, 1000)
            this.axios.get('/user/sms/'+ this.mobile)
            .then(res =>{
                console.log('获取验证码的响应:', res)
                this.$message({
                        type: 'success',
                        message: res.data.msg
                    })
            })
        },
        // 登录
        login(){
            this.axios.post('/user/user', {'mobile': this.mobile, 'sms_code': this.sms_code})
            .then(res =>{
                console.log('登录的响应:', res)
                if (res.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: res.data.msg
                    })
                    localStorage.setItem('token', res.data.token)
                    this.$router.push('/')
                } else {
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    })
                }
            }).catch(err =>{
                console.log('登录报错的响应;', err)
            })
        },

    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style>
.top8{
    width: 80%;
    margin-bottom: 20px;
}
#top2{
    /* line-height: 1310px; */
    margin-bottom: 50px;
    margin-top: 60px;
}
.top7{
    width: 120%;
}
.top5 {
  margin: 0 auto;
}
.top3 {
  background-color: #000;
  width: 100%;
  height: 100%;
}
.top1 {
  width: 80%;
  background-color: #fff;
  margin: 0 auto;
}
.top2 {
  display: flex;
  margin: 0 auto;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>


